<template>
  <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb >
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 添加分类按钮区域 -->
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 分类表格  -->
            <tree-table :data="cateList" 
            :columns="columns"
            :selection-type="false"
            :expand-type="false"
            show-index
            border
            :show-row-hover="false"
            >
 <template slot="isok" slot-scope="scope">
  <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:lightgreen"></i>
  <i class="el-icon-error" v-else style="color:red"></i>
</template>
<!-- 排序 -->
<template slot="order" slot-scope="scope">
  <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
  <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
  <el-tag size="mini" type="warning" v-else>三级</el-tag>
</template>

<!-- 操作 -->
<template slot="opt" slot-scope="scope">
                    
  <el-button size="mini" type="primary" icon="el-icon-edit" @click="editCate(scope.row)">编辑</el-button>
  <el-button size="mini" type="danger" icon="el-icon-delete" @click="delcate(scope.row.cat_id)">删除</el-button> 
</template>
            </tree-table>
            <!-- 分页 -->
            <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 7]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
        </el-card>
    <!-- 添加分类对话框 -->
    <el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
  <!-- 添加分类表单 -->
  <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
    <el-form-item label="分类名称" prop="cat_name">
      <el-input v-model="addCateForm.cat_name"></el-input>
    </el-form-item>
    <el-form-item label="父级分类">
    <el-cascader expandTrigger='hover' v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" @change="parentCateChange" clearable>
    </el-cascader>
</el-form-item>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>
<!-- 编辑商品分类对话框-->
<el-dialog
  title="编辑商品分类"
  :visible.sync="editdialogVisible"
  width="50%"
>
<el-form  :model="editcates" label-width="80px" :rules="editRules" ref="editruleForm" @close="editformclose">
  <el-form-item label="分类名称" prop="cat_name">
    <el-input v-model="editcates.cat_name"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editCate_name">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 商品分类数据列表
      cateList: [],
      //查询分类数据的条件
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 1
      },
      //保存总数据条数
      total: 0,
//先在columns中添加一个列
columns: [
    {label:'分类名称',prop:'cat_name'},
    //type:'template'(将该列设置为模板列)，template:'isok'(设置该列模板的名称为isok)
    {label:'是否有效',prop:'',type:'template',template:'isok'},
    {label:'排序',prop:'',type:'template',template:'order'},
    {label:'操作',prop:'',type:'template',template:'opt'}
],
addCateDialogVisible:false,
addCateForm:{
  //分类名称
  cat_name:'',
  //添加分类的父级id，0则表示父级为0.添加一级分类
  cat_pid:0,
  //添加分类的等级，0则表示添加一级分类
  cat_level:0
},
addCateFormRules:{
  //验证规则
  cat_name:[ {required:true , message:'请输入分类名称',trigger:'blur'} ]
},
parentCateList:[],
//配置级联菜单中数据如何展示
cascaderProps:{
  value:'cat_id',
  label:'cat_name',
  children:'children',
  expandTrigger:'hover',
  checkStrictly:true
},
//绑定用户选择的分类值
selectedKeys:[],
editcates:{
    cat_name:'',
    cat_id:''
},
editdialogVisible:false,
editRules:
    {
        cat_name:[{ required: true, message: '请输入分类名称', trigger: 'blur' },]
    }
  }
  },
  created() {
    this.getCateList()
  },
  methods: {
    async getCateList() {
      //获取商品分类数据
      const { data: res } = await this.$http.get('categories', {
        params: this.queryInfo
      })

      if (res.meta.status !== 200) {
        return this.$message.error('获取商品列表数据失败')
      }
      //将数据列表赋值给cateList
      this.cateList = res.data.result
      //保存总数据条数
      this.total = res.data.total
        console.log(res.data);
    },
    // 监听psgesize的变化
    handleSizeChange(newSize){
        this.queryInfo.pagesize=newSize
        this.getCateList()
    },
     handleCurrentChange(newPage){
    //当pagenum发生改变时触发
    this.queryInfo.pagenum = newPage;
    this.getCateList();
  },
  showAddCateDialog() {
      //调用getParentCateList获取分类列表
      this.getParentCateList()
  //显示添加分类对话框
  this.addCateDialogVisible = true
},
async getParentCateList(){
  //获取父级分类数据列表
  const { data: res } = await this.$http.get('categories', {
    params: {type:2}
  })

  if (res.meta.status !== 200) {
    return this.$message.error('获取商品分类列表数据失败')
  }
  this.parentCateList = res.data
},
 addCateDialogClosed(){
    //当关闭添加分类对话框时，重置表单
    this.$refs.addCateFormRef.resetFields()
    this.selectedKeys = [];
    this.addCateForm.cat_pid = 0
    this.addCateForm.cat_level = 0
  },
  parentCateChange(){
    console.log(this.selectedKeys);
    //如果用户选择了父级分类
    if(this.selectedKeys.length > 0){
      //则将数组中的最后一项设置为父级分类
      this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
      //level也要跟着发生变化
      this.addCateForm.cat_level = this.selectedKeys.length
      return
    }
  },
  addCate(){
      console.log(this.addCateForm);
          this.$refs.addCateFormRef.validate(async valid => {
      if (!valid) return
      //发送请求完成添加分类
      const { data: res } = await this.$http.post(
        'categories',
        this.addCateForm
      )

      if (res.meta.status !== 201) {
        return this.$message.error('添加分类失败')
      }

      this.$message.success('添加分类成功')
      this.getCateList()
      this.addCateDialogVisible = false
    })
  
  },
  editCate(cate){
      this.editcates.cat_name=cate.cat_name
      this.editcates.cat_id=cate.cat_id
      this.editdialogVisible=true
  },
  editformclose(){
      this.$refs.editruleForm.resetFields()
  },
  editCate_name(){
      this.$refs.editruleForm.validate(async valid=>{
          if(!valid) return
          const { data: res } = await this.$http.put('categories/'+this.editcates.cat_id , {cat_name:this.editcates.cat_name})
        if(res.meta.status !== 200)  return  this.$message.err('修改商品分类失败')    
        this.$message.success('修改商品分类成功') 
        this.getCateList()
      })
      this.editdialogVisible=false
  },
  async delcate(cat_id){
      const confirmResult =await this.$confirm('此操作将永久删除该商品分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
      
   
    if(confirmResult != "confirm"){
        return this.$message.info("已经取消删除") } 
        const { data: res } = await this.$http.delete('categories/'+cat_id) 
        console.log(res)
        if(res.meta.status !== 200)  return this.$message.err('删除失败')
        this.$message.success('删除成功')
        this.getCateList()
  }
  }
}
</script>

<style lang="less" scoped>
.el-button{
    margin-bottom: 15px;
}
.el-cascader{
    width:100%
}
</style>